import 'package:enterprise_v6_app/app/core/core.dart';
import 'package:enterprise_v6_app/app/data/common/charts_pie.dart';
import 'package:enterprise_v6_app/app/modules/application/smart_warehouse/device_manger/curve/ctrl.dart';
import 'package:enterprise_v6_app/app/modules/application/smart_warehouse/device_manger/curve/model.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

const _blue = Color.fromARGB(20, 84, 120, 246);

/// 智慧仓储设备曲线
class WarehouseDeviceCurvePage extends StatelessWidget {
  WarehouseDeviceCurvePage({super.key});

  final controller = Get.put(WarehouseDeviceCurveController());

  @override
  Widget build(BuildContext context) {
    return GetBuilder(
      init: controller,
      builder: (_) {
        return Scaffold(
          body: SafeArea(
            child: RotatedBox(
              quarterTurns: 3,
              child: _buildContent(),
            ),
          ),
        );
      },
    );
  }

  Widget _buildContent() {
    return Column(
      children: [
        _buildContentTitle(),
        _buildChart(),
      ],
    );
  }

  Widget _buildContentTitle() {
    return Row(
      children: [
        // Stack(
        //   alignment: Alignment.center,
        //   children: [
        //     SvgPicture.asset(
        //       AppImages.icon_red_trapezoid,
        //       width: 28.w,
        //       height: 18.w,
        //     ),
        //     Text('01', style: TextStyle(fontSize: 12.w, color: Colors.white)),
        //   ],
        // ),
        Row(
          children: [
            IconButton(onPressed: Get.back, icon: const Icon(Icons.arrow_back)),
            AppGaps.hGap10,
            Text(
              "${controller.args['name'] ?? '未知'}",
              style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.w500,
              ),
            ),
          ],
        ),
        const Spacer(),
        _buildSelect(WarehouseMonitorCurveType.humidity),
        _buildSelect(WarehouseMonitorCurveType.temperature),
        const Spacer(),
        _buildPeriodSelect(WarehouseMonitorCurveTimeType.week),
        _buildPeriodSelect(WarehouseMonitorCurveTimeType.month),
        _buildPeriodSelect(WarehouseMonitorCurveTimeType.year),
      ],
    );
  }

  /// Use https://pub.dev/packages/syncfusion_flutter_charts to draw chart
  Widget _buildChart() {
    final data = controller.data;
    return data.isEmpty
        ? Padding(
            padding: EdgeInsets.symmetric(vertical: 100.w),
            child: const CircularProgressIndicator(),
          )
        : SizedBox(
            height: 323.w,
            child: SfCartesianChart(
              primaryXAxis: CategoryAxis(),
              legend: const Legend(isVisible: false),
              trackballBehavior: TrackballBehavior(
                enable: true,
                lineDashArray: const [10],
                lineColor: Colors.grey,
                lineWidth: 1,
                activationMode: ActivationMode.singleTap,
                shouldAlwaysShow: true,
                tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
                tooltipSettings: const InteractiveTooltip(
                    enable: true,
                    color: Colors.white,
                    borderColor: Colors.grey,
                    connectorLineColor: Colors.transparent,
                    textStyle: TextStyle(color: Colors.black)),
              ),
              series: <ChartSeries>[
                SplineSeries<ChartData, String>(
                  dataSource: data,
                  xValueMapper: (val, _) => val.x,
                  yValueMapper: (val, _) => val.y,
                  name: controller.devType.name,
                  dataLabelMapper: (datum, index) => 'DATA',
                ),
              ],
            ));
  }

  Widget _buildSelect(WarehouseMonitorCurveType type) {
    return InkWell(
      onTap: () {
        controller.devType = type;
        controller.update();
      },
      child: Container(
        height: 36.w,
        width: 48.w,
        decoration: BoxDecoration(
          color: controller.devType == type ? _blue : null,
          // 仅底部边框
          border: Border(
            bottom: BorderSide(
              color: controller.devType == type ? _blue.withAlpha(255) : Colors.white,
              width: 2.w,
            ),
          ),
        ),
        alignment: Alignment.center,
        child: Text(
          type.name,
          style: TextStyle(fontSize: 14.sp, color: _blue.withAlpha(255)),
        ),
      ),
    );
  }

  Widget _buildPeriodSelect(WarehouseMonitorCurveTimeType type) {
    return InkWell(
      onTap: () {
        controller.timeType = type;
        controller.update();
        controller.getCurveData();
      },
      child: Container(
        height: 36.w,
        width: 48.w,
        decoration: BoxDecoration(
          color: controller.timeType == type ? _blue : null,
          // 仅底部边框
          border: Border(
            bottom: BorderSide(
              color: controller.timeType == type ? _blue.withAlpha(255) : Colors.white,
              width: 2.w,
            ),
          ),
        ),
        alignment: Alignment.center,
        child: Text(
          type.name,
          style: TextStyle(fontSize: 14.sp, color: _blue.withAlpha(255)),
        ),
      ),
    );
  }
}
